<template>
  <el-card style="padding-right: 50px">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="封面URL" prop="cover_url">
        <el-input v-model="form['cover_url']" />
      </el-form-item>
      <el-form-item label="格言" prop="quote">
        <el-input v-model="form['quote']" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="分类" prop="category_id">
            <el-select v-model="form['category_id']" placeholder="请选择" style="width:100%">
              <el-option
                v-for="category in categories"
                :key="category.id"
                :label="category['category_name']"
                :value="category.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签" prop="tag_id_list">
            <el-select v-model="form['tag_id_list']" multiple placeholder="请选择" style="width:100%">
              <el-option
                v-for="tag in tags"
                :key="tag.id"
                :label="tag['tag_name']"
                :value="tag.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="文章正文" prop="content">
        <mavon-editor v-model="form['content']" />
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="文章属性" :visible.sync="dialogVisible" width="20%">
      <el-form>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="8">
            <el-form-item>
              <el-switch
                v-model="form.is_public"
                active-text="公开"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-switch
                v-model="form.recommended"
                active-text="推荐"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePublish">发 布</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getCategoriesAndTags } from '@/api/category'

export default {
  name: 'Article',
  props: {
    form: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
        ],
        cover_url: [
          { required: true, message: '请输入封面url', trigger: 'blur' }
        ],
        quote: [
          { required: true, message: '请输入格言', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        tag_id_list: [
          { type: 'array', required: true, message: '至少选择一个标签', trigger: 'change' }
        ]
      },
      categories: [],
      tags: [],
      dialogVisible: false,
      formLabelWidth: '120px'
    }
  },
  created() {
    getCategoriesAndTags().then(res => {
      const { data } = res
      this.categories = data.categories
      this.tags = data.tags
    })
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handlePublish() {
      this.$emit('handleClick', this.form)
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
